<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>按钮</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon" href="../../yo.png" />
<link rel="shortcut icon" href="../../shortcut.png" />
<link rel="stylesheet" href="../../usage/export/yo-btn.css" />
</head>
<body>
<div class="yo-flex">
    <header class="yo-header m-header">
        <h2 class="title">yo-btn</h2>
        <a href="../index.html" class="regret yo-ico">&#xf07d;</a>
        <a href="../../doc/element.html#yo-btn" class="affirm">文档</a>
    </header>
    <div class="flex">
        <section class="yo-list yo-list-group m-demo">
            <h3 class="label">常规：</h3>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-s">Button</a>
                <button class="yo-btn yo-btn-s">Button</button>
                <button class="yo-btn yo-btn-s yo-btn-disabled">Button</button>
            </div>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-m">Button</a>
                <button class="yo-btn yo-btn-m">Button</button>
                <button class="yo-btn yo-btn-m yo-btn-disabled">Button</button>
            </div>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-l">Button</a>
                <button class="yo-btn yo-btn-l">Button</button>
                <button class="yo-btn yo-btn-l yo-btn-disabled">Button</button>
            </div>
        </section>

        <section class="m-desc">
            <h3 class="title">示例描述：</h3>
            <xmp><a href="?" class="yo-btn">Button</a>
<button class="yo-btn">Button</button>
<input type="button" value="Button" class="yo-btn" /></xmp>
            <h3 class="sub-title">yo-btn预置了3种size：s, m, l</h3>
            <xmp><a href="?" class="yo-btn yo-btn-s">Button</a>
<a href="?" class="yo-btn yo-btn-m">Button</a>
<a href="?" class="yo-btn yo-btn-l">Button</a></xmp>
            <h3 class="sub-title">你可以在业务代码配置文件config.scss中对这3种size进行定义</h3>
            <xmp>$btn: (
    ...
    // {Length} 默认预设3种尺寸按钮：
    // small
    s-height:       .28rem,
    s-font-size:    .12rem,
    // medium
    m-height:       .36rem,
    m-font-size:    .14rem,
    // large
    l-height:       .44rem,
    l-font-size:    .16rem
);</xmp>
        </section>

        <section class="yo-list yo-list-group m-demo">
            <h3 class="label">自定义按钮：</h3>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-light yo-btn-s">Button</a>
                <button class="yo-btn yo-btn-light yo-btn-s">Button</button>
                <button class="yo-btn yo-btn-light yo-btn-s yo-btn-disabled">Button</button>                </div>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-light yo-btn-m">Button</a>
                <button class="yo-btn yo-btn-light yo-btn-m">Button</button>
                <button class="yo-btn yo-btn-light yo-btn-m yo-btn-disabled">Button</button>                </div>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-light yo-btn-l">Button</a>
                <button class="yo-btn yo-btn-light yo-btn-l">Button</button>
                <button class="yo-btn yo-btn-light yo-btn-l yo-btn-disabled">Button</button>
            </div>
            <h3 class="label">自定义按钮：</h3>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-info yo-btn-s">Button</a>
                <button class="yo-btn yo-btn-info yo-btn-s">Button</button>
                <button class="yo-btn yo-btn-info yo-btn-s yo-btn-disabled">Button</button>
            </div>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-info yo-btn-m">Button</a>
                <button class="yo-btn yo-btn-info yo-btn-m">Button</button>
                <button class="yo-btn yo-btn-info yo-btn-m yo-btn-disabled">Button</button>
            </div>
            <div class="item">
                <a href="?" class="yo-btn yo-btn-info yo-btn-l">Button</a>
                <button class="yo-btn yo-btn-info yo-btn-l">Button</button>
                <button class="yo-btn yo-btn-info yo-btn-l yo-btn-disabled">Button</button>
            </div>
        </section>
        <section class="m-desc">
            <h3 class="title">假设你想要多种风格的按钮，只需这样扩展：</h3>
            <xmp>// 自定义一个 `yo-btn-info` 按钮
@include yo-btn(
    $name: info,
    $border-color: #0456e2,
    $bgcolor: #4a87ee
);</xmp>
            <h3 class="sub-title">使用方法：</h3>
            <xmp><button class="yo-btn yo-btn-info">Button</button></xmp>
            <h3 class="sub-title">如果需要禁用按钮，你需要这样：</h3>
            <xmp><button class="yo-btn yo-btn-info">Button</button>
                ↓↓↓
<button class="yo-btn yo-btn-info yo-btn-disabled">Button</button></xmp>
            <p class="info">所有按钮的禁用时统一使用 `yo-btn-disabled`</p>
        </section>

        <section class="yo-list yo-list-group m-demo">
            <h3 class="label">通栏按钮：</h3>
            <div class="item">
                <button class="yo-btn yo-btn-l yo-btn-stacked">Button</button>
            </div>
            <div class="item">
                <button class="yo-btn yo-btn-light yo-btn-l yo-btn-stacked">Button</button>
            </div>
            <div class="item">
                <button class="yo-btn yo-btn-info yo-btn-l yo-btn-stacked">Button</button>
            </div>
        </section>
        <section class="m-desc">
            <h3 class="title">`yo-btn-stacked` 让你拥有通栏按钮：</h3>
            <xmp><button class="yo-btn yo-btn-stacked">Button</button></xmp>
        </section>

    </div>
</div>

</body>
</html>